<%--
  Created by IntelliJ IDEA.
  User: bestick
  Date: 2016/1/19
  Time: 15:57
  天地有万古，此身不再得；人生只百年，此日最易过。幸生其间者，不可不知有生之乐；亦不可不怀虚生之忧。
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%-- IF IE --%>
    <jsp:include page="${pageContext.request.contextPath}/jsp/home/common/if_ie.jsp"></jsp:include>

    <!-- charset -->
    <meta charset="utf-8">

    <!-- title -->
    <title>基金详情</title>

    <!-- Mobile Meta -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1, user-scalable=no">

    <!-- Favicon -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resources/app/images/img/logo/favicon.ico">

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- BootStrap-Slider core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap-slider/bootstrap-slider.css"
          rel="stylesheet">

    <!-- Swiper core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/swiper/swiper.css" rel="stylesheet">

    <!-- JuCaiBang core CSS file -->
    <link href="${pageContext.request.contextPath}/resources/app/css/home/jcb.css" rel="stylesheet">

    <style>
        .fundDetail-bg-2 input.btn {
            display: inline-block;
            width: 45%;
            margin-left: 4%;
            font-family: microsoft yahei;
        }
    </style>
</head>
<body>
<%-- navbar --%>
<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/nav_nonsearch.jsp"></jsp:include>

<!-- main -->
<div class="fundDetail" data-pid="${param.pId}">
    <div class="fundDetail-bg-1">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">

            <!-- fundDetail-info -->
            <div class="fundDetail-info" id="fundDetail-info"></div>
            <hr />

            <!-- fundDetail-cValue -->
            <div class="fundDetail-cValue" id="fundDetail-cValue">
                <div class="title">
                    <span class="glyphicon glyphicon-play indicate"></span>万份收益
                </div>

                <div class="content col-md-10 col-md-offset-1">
                    <div class="chart-box">
                        <div class="fund-chart" id="cValue-chart"></div>
                        <div class="control">
                            <p data-month="1" class="cValue-data-month">一月<span class="date"></span></p>
                            <p data-month="3" class="cValue-data-month">一季<span class="date"></span></p>
                            <p data-month="6" class="cValue-data-month">半年<span class="date"></span></p>
                            <p data-month="12" class="cValue-data-month">一年<span class="date"></span></p>
                        </div>
                    </div>

                    <div class="table overflow-y-scroll">
                        <table>
                            <tr>
                                <td class="head">日期</td>
                                <td class="head">每万份收益</td>
                                <td class="head">七日年化收益</td>
                            </tr>
                        </table>
                        <table id="fund-daily"></table>
                    </div>
                </div>
            </div>
            <hr />

            <!-- fundDetail-feexv -->
            <div class="fundDetail-totalRate" id="fundDetail-totalRate">
                <div class="title">
                    <span class="glyphicon glyphicon-play indicate"></span>七日年化
                </div>
                <div class="content col-md-10 col-md-offset-1">
                    <div class="chart-box">
                        <div class="fund-chart" id="rate-chart"></div>
                        <div class="control">
                            <p data-month="1" class="rate-data-month">一月<span class="date"></span></p>
                            <p data-month="3" class="rate-data-month">一季<span class="date"></span></p>
                            <p data-month="6" class="rate-data-month">半年<span class="date"></span></p>
                            <p data-month="12" class="rate-data-month">一年<span class="date"></span></p>
                        </div>
                    </div>
                </div>
            </div>
            <hr />

            <!-- fundDetail-feexv -->
            <div class="fundDetail-feexv" id="fundDetail-feexv">
                <div class="title">
                    <span class="glyphicon glyphicon-play indicate"></span>申购费率
                </div>

                <div class="content col-md-10 col-md-offset-1" id="fund-fee-rate"></div>
            </div>
            <hr />
        </div>
    </div>
    <div class="fundDetail-bg-2">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
            <div class="tabs">
                <input id="profile" type="button" class="btn btn-jcb-transparent" value="简介" />
                <input id="notice" type="button" class="btn btn-jcb-transparent" value="公告" />
            </div>

            <div class="content">
                <div class="table profile" id="profile-rs"></div>
                <div class="table notice hidden" id="notice-rs"></div>
            </div>
        </div>
    </div>

    <div class="fundDetail-bg-3">
        <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
            <div class="detail-evaluate">
                <div class="detail-evaluate-header">评价详情</div>
                <div class="detail-evaluate-content" id="detail-evaluate-content"></div>
                <jsp:include page="${pageContext.request.contextPath}/jsp/home/common/evaluate.jsp"></jsp:include>
            </div>
        </div>
    </div>
</div>


<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/footer.jsp"></jsp:include>

<!-- JavaScript files placed at the end of the document so the pages load faster
		==================================================================================== -->
<!-- Jquery and Bootstap core js files -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jsrender.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/range.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/Highcharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/bootstrap-slider.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/swiper.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/config.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/fundDetail.js"></script>

<!-- 基金详情info模版 -->
<script id="fundDetail-info-temp" type="text/x-jsrender">
    {{!-- fundDetail-info-left --}}
    <div class="fundDetail-info-left">
        <p class="fundDetail-info-title">
            {{:data.pFundName}}&nbsp;({{: data.fundCode}})
        </p>
        <div class="fundDetail-info-interest">
            <div class="fundDetail-info-benefitRate inline-block">
                <span style="font-size: 38px;">{{:data.latestWeeklyYield.toFixed(2)}}</span><span>%</span>
                <p>七日年化</p>
            </div>
            <div class="fundDetail-info-term inline-block">
                {{:zhangdie.fundYearFlow.toFixed(2)}}<span>%</span>
                <p>近一年收益</p>
            </div>
            <div class="fundDetail-info-rank inline-block">
                {{: data.fundRank /}}<span>/{{: data.fundAllCount}}</span>
                <p>排名（季度同类）</p>
            </div>
        </div>
    </div>
    {{!-- fundDetail-info-right --}}
    <div class="fundDetail-info-right">
        <div class="fundDetail-info-btn">
            <%--<input type="button" class="btn btn-jcb-red" value="预约">--%>
            <input id="concerned" type="button" class="btn btn-jcb-red" value="收藏">
        </div>
    </div>
</script>

<!-- 基金历史明细模版 -->
<script id="fund-daily-temp" type="text/x-jsrender">
    {{!-- fund-daily --}}
    {{for data}}
        <tr>
            <td>{{: ~dateFormat(recordedDate,"c") /}}</td>
            <td>{{: fundCurrentValue.toFixed(4)}}</td>
            {{if latestWeeklyYield>0}}
                <td class="rise">+{{: ~doubleFormat(latestWeeklyYield) /}}<span class="unit">%</span></td>
            {{else latestWeeklyYield==0}}
                <td>{{: ~doubleFormat(latestWeeklyYield) /}}<span class="unit">%</span></td>
            {{else}}
                <td class="drop">{{: ~doubleFormat(latestWeeklyYield) /}}<span class="unit">%</span></td>
            {{/if}}
        </tr>
    {{/for}}
</script>

<!-- 基金申购费率模版 -->
<script id="fund-fee-rate-temp" type="text/x-jsrender">
    {{!-- fund-fee-rate --}}
    <div class="table">
        <p>费率</p>
        <table>
            {{for data1}}
                {{feeBuyRange ~root.data1.length index floor top standardBuyRate rateType /}}
            {{/for}}
            {{for data2}}
                {{feeTimeRange ~root.data2.length index floor top timeType realBuyRate rateType /}}
            {{/for}}
            <tr>
                <td rowspan="2" class="head">运作费用</td>
                <td class="text-left">管理费<span class="pull-right">{{: data3.manageFeeRate.toFixed(2)}}%</span></td>
            </tr>
            <tr>
                <td class="text-left">托管费<span class="pull-right">{{: data3.consignFeeRate.toFixed(2)}}%</span></td>
            </tr>
        </table>
        <p class="tip">运作费率从基金总资产计提，净值中已扣除管理费和托管费，无需投资者在交易中另行支付。</p>
    </div>
    <div class="table">
        <p>交易时间说明</p>
        <table>
            <tr>
                <td class="head">申购确认</td>
                <td>T+{{: data3.confirm}}确认</td>
            </tr>
            <tr>
                <td class="head">赎回确认</td>
                <td>T+{{: data3.confirm}}确认</td>
            </tr>
            <tr>
                <td class="head">赎回到账</td>
                <td>T+{{: data3.redeempay}}到账</td>
            </tr>
        </table>
        <p class="tip">T日是指交易日，周末和节假日不属于T日，每天15:00(股市收市)之前提交的交易按照当天收市后公布的净值成交， 15:00之后提交的交易按照下一个交易日的净值成交。</p>
    </div>
</script>

<!-- 基金概况模版 -->
<script id="fundDetail-desc-temp" type="text/x-jsrender">
    {{!-- desc --}}
    <p class="title">基金概况</p>
    <p class="subTitle">{{: data.BriefIntro}}</p>
</script>

<!-- 简介模版 -->
<script id="profile-rs-temp" type="text/x-jsrender">
    {{!-- profile --}}
    <div id="fundDetail-desc"></div>
    <table>
        <tr>
            <td class="head">基金全称</td>
            <td class="text-left">{{: data.pFundName}}</td>
            <td class="head">资产规模</td>
            <td class="text-left">{{: ~moneyFormat(data.propertyScale) /}}</td>
        </tr>
        <tr>
            <td class="head">基金代码</td>
            <td class="text-left">{{: data.fundCode}}</td>
            <td class="head">份额规模</td>
            <td class="text-left">{{: ~portionFormat(data.amountScale) /}}</td>
        </tr>
        <tr>
            <td class="head">基金类型</td>
            <td class="text-left">{{sysConstants data.fundType "fundType" /}}</td>
            <td class="head">基金管理人</td>
            <td class="text-left">{{: data.fundCompanyName}}</td>
        </tr>
        <tr>
            <td class="head">风险等级</td>
            <td class="text-left">{{sysConstants data.riskRank "risk" /}}</td>
            <td class="head">基金托管人</td>
            <td class="text-left">{{: data.fundHoldBank}}</td>
        </tr>
        <tr>
            <td class="head">成立日期</td>
            <td class="text-left">{{: ~dateFormat(data.setupDate,"b") /}}</td>
            <td class="head">基金经理</td>
            <td class="text-left">{{: data.Manager}}</td>
        </tr>
    </table>
    <div id="fundManager"></div>
</script>

<!-- 基金经理模版 -->
<script id="fundManager-temp" type="text/s-jsrender">
    {{!-- fundManager --}}
    <p class="title">基金经理</p>
    <table>
        <tr>
            <td class="head">{{: data.fundManagerName}}</td>
            <td class="text-left">{{: data.fundManagerInstruction}}</td>
        </tr>
    </table>
    <p class="title">基金类型<span>{{sysConstants data.fundType "fundType" /}}</span></p>
    <p class="title">资产规模<span>{{: ~moneyFormat(data.propertyScale) /}}</span></p>
    <p class="title">基金公司<span>{{: data.publisher }}</span></p>
</script>

<!-- 公告模版 -->
<script id="notice-rs-temp" type="text/x-jsrender">
    {{!-- notice --}}
    {{for newses}}
        <p class="title">{{: pnTitle}}<span class="pull-right">{{: ~dateFormat(pnPublishDate,"a") /}}</span></p><hr/>
    {{else}}
        暂无数据
    {{/for}}
</script>
</body>
</html>
